<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<style>
			.username {
				height: 30px;
				width: 80%;
			}
			.pwd {
				height: 30px;
				width: 80%;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
		// $ == JQuery
			$(document).ready(
				function() {
				// 	$("p").click(
				// 	function() {
				// 	$(this).hide();
				// });
				$("#p1").click(function(){
					// 当我通过JQuery拿到了DOM对象
					// 我如何得知DOM有哪些属性？
					$(this).text = "测试"
					window.alert($(this).text);
				})
				$("#login").click(function(){
					// Css 类选择器不能取出当前的DOM
					// ID 选择器就可以
					var username = $("#username").val()
					console.log("输入用户名=>" + username)
					if(username == '' || username == null){
						window.alert("请输入用户名")
						return
					}
					var pwd = $("#pwd").val()
					if(pwd == ""){
						window.alert("请输入密码")
						return
					}
					window.alert("登录成功~")
				})
			});
		</script>
	</head>
	<body>
		<p id="p1">如果你点我，我就会消失。</p>
		<input id="username" class="username" type="text" placeholder="请输入用户名" /><br>
		<input id="pwd" class="pwd" type="password" placeholder="请输入密码" /><br>
		<button id="login">登录</button>
		
	</body>
</html>
